<template>
	<view>
		<uni-section title="选择要修改的主机" type="line" padding sub-title="下拉可刷新数据">
			<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
			<swiper class="swiper" :indicator-dots="true">
				<swiper-item v-for="(items,index) in grouphostlist" :key="index">
					<uni-grid :column="3" :highlight="true">
						<uni-grid-item v-for="(item, index1) in items" :index="index1" :key="index1">
								<view class="grid-item-box" @click="clickItemHost(item)">
								<!-- <image :src="item.url" class="image" mode="aspectFill" /> -->
								<text class="text">{{ item.are }}</text>
								<text class="text">{{ item.customAre }}</text>
								<text class="text">{{ item.ip }}</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</swiper-item>
			</swiper>
		</uni-section>
		<view class="form-container" v-if="showForm">
			<uni-forms  :ref="formhost">
				<uni-forms-item label="ip" required>
					<uni-easyinput v-model="updateInfo.ip" name="ip" placeholder="请输入主机ip" />
				</uni-forms-item>
				<uni-forms-item label="园区" required>
					<uni-easyinput v-model="updateInfo.are" name="are" placeholder="请输入主机所在园区" />
				</uni-forms-item>
				<uni-forms-item label="区域" required>
					<uni-easyinput v-model="updateInfo.customAre" name="customAre" placeholder="请输入主机区域编号" />
				</uni-forms-item>
				<uni-forms-item label="厂家" required>
					<uni-easyinput v-model="updateInfo.factoryOwner" name="factoryOwner" placeholder="请输入主机厂家" />
				</uni-forms-item>
				<uni-forms-item label="系统" required>
					<uni-easyinput v-model="updateInfo.projectName" name="projectName" placeholder="请输入主机系统" />
				</uni-forms-item>
				<uni-forms-item label="电机型号" required>
					<uni-easyinput v-model="updateInfo.electricalMachinery" placeholder="请输入主机电机型号" />
				</uni-forms-item>
				<uni-forms-item label="变频器型号" required>
					<uni-easyinput v-model="updateInfo.converter" placeholder="请输入主机变频器型号" />
				</uni-forms-item>
				<uni-forms-item label="触摸屏型号" required>
					<uni-easyinput v-model="updateInfo.hmi" placeholder="请输入主机触摸屏型号" />
				</uni-forms-item>
				<uni-forms-item label="其他描述信息" required>
					<uni-easyinput v-model="updateInfo.otherDesc" placeholder="请输入其他描述信息" />
				</uni-forms-item>
				<uni-forms-item>
					
				<view class="form-btn">
					<button type="primary" size="mini" @click="closeFrom">取消</button>
					<button type="primary" size="mini" @click="submitInfo">提交</button>
				</view>
				</uni-forms-item>
			</uni-forms>
		</view>

	</view>
	</view>
	<!-- 弹出表单结束 -->
	</view>
</template>

<script>
	import api from "../../api/api.js"
	export default {
		data() {
			return {
				formhost:"updatehost",
				updateInfo: {
					ip: "",
					are: "",
					customAre: "",
					factoryOwner: "",
					projectName: "",
					electricalMachinery: "",
					converter: "",
					hmi: "",
					otherDesc: "",
				},

				showForm: false,
				grouphostlist: [],
			}
		},
		onPullDownRefresh() {
			this.getUserHostList();
			uni.stopPullDownRefresh();
		},
		onLoad() {
			this.getUserHostList();
		},
		methods: {
			// 关闭表单
			closeFrom() {
				this.showForm = false;
			},
			// 提交更改数据
			submitInfo() {
				console.log('表单数据：',this.updateInfo);
				api.updateHostById(this.updateInfo).then(res =>{
					if(res.code === 200){
						this.showForm = false; // 关闭表单
					}
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
				})
				
			},
			// 打开表单
			clickItemHost(item) {
			// 	uni.showToast({
			// 		// title: `点击第${index+1}个宫格`,
			// 		title: `点击 主机id:${item.id}`,
			// 		icon: 'none',
			
			// 	});
				this.updateInfo = item;
				this.showForm = true;
				
			},
			// 获取用户名下主机
			getUserHostList() {
				uni.getStorage({
					key: api.base.userInfo,
					success: key => {
						api.getAllHost(key.data).then(res => {
							// console.log(res)
							// this.hostList = res.data;
							this.grouphostlist = this.groupList(res.data, 9);
							console.log("新分组", this.grouphostlist);
						})
					}
				})
			},
			//数组分割
			groupList(array, subGroupLength) {
				let index = 0;
				let newArray = [];
				while (index < array.length) {
					newArray.push(array.slice(index, index += subGroupLength));
				}
				return newArray;
			}
		}
	}
</script>

<style lang="scss">
	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */

	// 表单样式开始
	.form-container {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 10;
		background-color: #f3f3f3;
		padding: 10px;
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		width: 90%;
	}
	.form-btn{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	// 表单样式结束
</style>